<template>
	<view class="container">
		<view class="content">
			<view class="shop_list">
				<view class="text">
					商品二级分类名称：
				</view>
				<input type="text" v-model="shop_name" placeholder="请输入分类名称">
			</view>
			<Lines></Lines>
			<view class="uni-uploader-body">
				<view class="text">上传二级分类图片：</view>
				<view class="uni-uploader__files">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uni-uploader__file" style="position: relative;">
							<uni-icons @tap="delimage(index)" class="del" size="20" type="clear"></uni-icons>
							<image ref="files" class="uni-uploader__img" :src="image" :data-src="image"
								@tap="previewImage(index)"></image>
						</view>
					</block>
					<view v-show="imageList.length < 1" class="uni-uploader__input-box">
						<view class="uni-uploader__input" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-goods">
			<view class="add-goods-item" @tap="insertData">确定</view>
		</view>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import $http from '../../common/api/request.js'
	import {
		mapState
	} from 'vuex'
	import {
		v4 as uuidv4
	} from 'uuid'
	export default {
		data() {
			return {
				// 一级分类id
				itemId: '',
				// 回显的图片数组
				imageList: [],
				// 商品名称
				shop_name: '',
				//存储外链
				partImgUrl: [],
				//七牛云的外链
				qiniuBucketURLPrefix: 'verification.zydxydsxt.top/',

			}
		},
		components: {
			Lines
		},
		onLoad(e) {
			if (e.id) {
				this.itemId = e.id
			}
		},
		methods: {
			// 添加二级商品分类
			insertData() {
				$http.request({
					url: '/insertSencodeList',
					method: 'POST',
					header: {
						token: true
					},
					data: {
						list_id: this.itemId,
						shop_name: this.shop_name,
						shop_img: this.partImgUrl[0].imgUrl
					}
				}).then((res) => {
					if (res.protocol41) {
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch(() => {

				})
			},
			// 删除图片
			delimage(index) {
				this.imageList.splice(index, 1);
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList, //需要预览的图片连接列表
					current: this.imageList[index] //当前显示的图片连接
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数
					sizeType: ['compressed'], //original原图 compressed压缩图
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
					// 成功则返回图片的本地文件路径列表 tempFilePaths
					success: (chooseImageRes) => {
						this.imageList.push(...chooseImageRes.tempFilePaths)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.imageList.forEach((item, index) => {
							$http.request({
								url: '/storeToken',
								method: 'POST'
							}).then((res) => {
								// 唯一码
								const uuid = uuidv4()
								let uploadMsg = res;
								let uniqueCode = uuid;
								let postUrl = 'http://upload-z2.qiniu.com'
								uni.uploadFile({
									url: postUrl,
									fileType: "image",
									filePath: item,
									name: 'file',
									formData: {
										'key': uniqueCode.slice(0, 10),
										'token': uploadMsg
									},
									// 经过escape()转转义之后的文件名和图片链接一部分一致
									success: (uploadFileRes) => {
										let key = JSON.parse(uploadFileRes.data)
											.key
										let partImgUrl = escape(uniqueCode.slice(0,
											10));
										this.partImgUrl.push({
											imgUrl: 'http://' + this
												.qiniuBucketURLPrefix +
												partImgUrl
										})
									},
									fail: (err) => {
										console.log('fail', err);
									}
								})

							}).catch((err) => {
								console.log(err);
							})
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		padding: 16rpx;
	}

	.shop_list {
		display: flex;
	}

	.add-goods {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: #49bdfb;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
</style>